<template>
  <div class="pt-[20px]">
    <div class="text-[16px] font-[400] text-center">Hi，what can we help you with？</div>
    <div class="m-auto w-[600px]">
      <div
        class="h-[48px] mt-[20px] bg-[#fff] rounded-[40px] flex items-center overflow-hidden p-[2px]"
        style="border:1px solid #000"
      >
        <div class="relative flex-1 w-0">
          <input
            v-model="keyword"
            class="w-full h-[40px] border-0 outline-none px-[15px] bg-[#fff] pr-[64px]"
            type="text"
            :placeholder="$t('title.搜索问题')"
          />
        </div>
        <n-button
          type="primary"
          class="h-[42px] w-[64px] rounded-[40px] "
          @click="onClickSearch"
        >
          <template #icon>
            <n-icon :size="28">
              <SearchOutline />
            </n-icon>
          </template>
        </n-button>
      </div>
    </div>
    <div class="mt-[20px] h-[600px]">
      <n-scrollbar style="height: 100%">
        <div v-for="item in list" :key="item.id" class="item">
          <div @click="onClickItem(item)">{{ item.title }}</div>
        </div>
      </n-scrollbar>
    </div>
    <div>
      <n-divider>
        <div class="text-[#1A1A1A] text-[16px] font-[400]">Need more help？</div>
      </n-divider>
      <div class="flex mt-[68px]">
        <img class="w-[358px] m-auto" src="/images/contact2.png" />
      </div>
    </div>
    <n-modal
      v-model:show="currentQa.show"
      preset="dialog"
      class="rounded-[24px]"
      title=""
      style="width: 900px"
      :closable="true"
      :show-icon="false"
      :close-on-esc="true"
      :mask-closable="true"
    >
      <div class="h-[600px] flex flex-col">
        <div class="text-[24px] font-[400] text-center mb-[16px]">
          {{ currentQa.data?.title }}
        </div>
        <div class="flex-1 h-0">
          <n-scrollbar style="height: 100%">
            <div v-html="currentQa.data?.content"></div>
          </n-scrollbar>
        </div>
      </div>
    </n-modal>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SearchOutline } from "@vicons/ionicons5";
import { getQAList } from "@/api/common";
const originData = ref([]);
const list = ref([]);
const keyword = ref("");
const currentQa = ref({
  data: {},
  show: false,
});
onMounted(async () => {
  const { data } = await getQAList();
  originData.value = data.data;
  list.value = data.data;
});

const onClickSearch = () => {
  list.value = originData.value.filter((x) => x.title.includes(keyword.value));
};

const onClickItem = (item) => {
  currentQa.value.data = item;
  currentQa.value.show = true;
};
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  color: #1a1a1a;
  > div{
    transition: all 0.3s;
  }
  > div:first-child {
    cursor: pointer;
    &:hover {
      color: var(--main-color);
      padding-left:10px;
    }
  }
}
</style>
